<template>
  <el-row class="mx__20 px-20 bg-white">
    <el-col class="current-content-style">
      <el-row class="py-20">
        <el-col>
          <el-row type="flex" justify="end" :gutter="0">
            <el-input v-model="searchValue" style="width: 200px"></el-input>
            <el-button type="primary">查询</el-button>
            <el-button plain type="info">导出</el-button>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-table stripe :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
            :header-row-class-name=" ({ row, rowIndex }) => { if (rowIndex === 0) return 'table-header-bg' } " >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="customerName" label="客户名称"> </el-table-column>
            <el-table-column prop="waterNumber" label="水表编号"> </el-table-column>
            <el-table-column prop="recordTime" label="账单时间"> </el-table-column>
            <el-table-column prop="billingName" label="用水类型"> </el-table-column>
            <el-table-column prop="recordCreateTime" label="抄表日期"> </el-table-column>
            <el-table-column prop="recordLast" label="上月度数" width="80"> </el-table-column>
            <el-table-column prop="recordNow" label="本月抄表读数"> </el-table-column>
            <el-table-column prop="recordConsumption" label="实际用量(吨)"> </el-table-column>
            <el-table-column prop="billReceivable" label="应收金额(元)"> </el-table-column>
            <el-table-column prop="billDeduction" label="减免金额(元)"> </el-table-column>
            <el-table-column prop="billPaid" label="实收金额(元)"> </el-table-column>
            <el-table-column prop="billPay" label="已收金额(元)"> </el-table-column>
            <el-table-column prop="billUnpay" label="未缴金额(元)"> </el-table-column>

            <el-table-column label="操作">
              <template v-slot="scope">
                <el-button
                  class="text-primary"
                  icon="el-icon-warning-outline"
                  v-if="scope.row.billState === 1"
                  type="text"
                  @click="payHandler(scope.row)"
                  >收费</el-button
                >
                <el-button
                  class="text-success"
                  icon="el-icon-success"
                  v-else-if="scope.row.billState === 2"
                  type="text"
                  @click="payHandler(scope.row)"
                  >已缴费</el-button
                >
                <el-button
                  class="text-danger"
                  icon="el-icon-circle-plus"
                  v-else-if="scope.row.billState === 3"
                  type="text"
                  @click="payHandler(scope.row)"
                  >未缴清</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-dialog title="收费" :visible.sync="payModal" width="30%">
        <el-row>
          <el-col>
            <el-form ref="form" :model="form" label-width="120px">
              <el-form-item label="金额">
                <el-input
                  ref="payinput"
                  v-model="form.money"
                  type="text"
                  placeholder="
请输入缴费金额；注：不能大于实收金额"
                  @change="checkPayMoney"
                >
                </el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button @click="payModal = false">取 消</el-button>
          <el-button type="primary" @click="customerPay">确 定</el-button>
        </span>
      </el-dialog>
      <el-row class="my-20" style="text-align: right">
        <el-col :span="24">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
// 缴费管理
import { waterBillQueryPage, waterBillPay } from '@/config/api'
export default {
  data() {
    return {
      payModal: false,
      form: { money: 0, billId: '', billPaid: 0 },
      pageSizes: [10, 20, 30, 50],
      pageSize: 10,
      total: 0,
      currentPage: 1,
      searchValue: '',
      tableData: []
    }
  },
  created() {
    this.waterBillQueryPageHandler({ pageSize: this.pageSize, pageNum: this.currentPage })
  },
  methods: {
    // 检查输入的金额的合法性
    checkPayMoney() {
      if (/(^\d+$)|(^\d+\.\d{0,2}$)/.test(this.form.money)) {
        if (this.form.money > this.form.billPaid) {
          this.$message({
            type: 'warning',
            message: '减免金额不能大于实收金额！'
          })
          this.form.money = 0
          this.$refs.payinput.focus()
        }
      } else {
        this.$message({
          type: 'warning',
          message: '只能数字0-9和".",小数最多有2位'
        })
        this.form.money = 0
        this.$refs.payinput.focus()
      }
    },
    //缴费
    customerPay() {
      console.log(this.form)
      if (this.form.money > this.form.billPaid) {
        // this.payModal = false
        this.$message({
          message: '缴费金额不能大于实际收费金额',
          type: 'warning'
        })
        this.$refs.payinput.focus()
        return
      }
      if (this.form.money === 0) {
        this.$message({
          message: '缴费金额为0,缴费未成功',
          type: 'warning'
        })
        this.$refs.payinput.focus()
        return
      }

      // 缴费接口调用
      waterBillPay({ billId: this.form.billId, money: this.form.money }).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '缴费成功'
          })

          this.waterBillQueryPageHandler({ pageSize: this.pageSize, pageNum: this.currentPage })
          this.payModal = false //隐藏modal
        } else {
          this.$message({
            type: 'error',
            message: '缴费失败'
          })
          this.payModal = false //隐藏modal
        }
      })
    },
    // 显示收费的modal
    payHandler(row) {
      console.log(row)
      this.payModal = true
      this.form.money = 0
      this.form.billId = row.billId
      this.form.billPaid = row.billPaid // 实收金额
    },
    handleSelectionChange() {},
    // 以下2个是分页功能
    handleSizeChange(size) {
      this.pageSize = size
      this.waterBillQueryPageHandler({ pageSize: size, pageNum: 1 })
    },
    handleCurrentChange(page) {
      this.currentPage = page
      this.waterBillQueryPageHandler({ pageSize: this.pageSize, pageNum: page })
    },
    // 请求后台账单数据
    waterBillQueryPageHandler(params) {
      waterBillQueryPage(params).then(res => {
        console.log(res)
        if (res.code === 200) {
          let arr = []
          res.data.list.forEach(el => {
            // 组合表格可以直接渲染得对象数据后，在push到arr,最后赋值给tableData
            let obj = {
              ...el.bill,
              adminName: el.bill.admin.adminName,
              ...el.degreeRecordDto,
              billingName: el.billingName
            }
            // console.log(obj)
            arr.push(obj)
          })
          this.tableData = arr
          this.total = res.data.total
          // console.log(this.tableData)
        } else {
          this.$message({
            message: '请求失败',
            type: 'error'
          })
        }
      })
    }
  }
}
</script>

<style scoped>
/* /deep/ .table-header-bg > th {
  background-color: rgba(233, 182, 226, 0.534) !important;
} */
</style>
